window.onload = function () {
    // 当点击某一个li的时候，该li添加下边线  bottomColor
    var lis = document.querySelectorAll(".aside .nav .nav li");
    var Aa = document.querySelectorAll(".aside .nav .nav li a");
    var oUl = document.querySelectorAll(".aside .nav .nav li ul");
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].addEventListener("click", function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "bottomColor";
      });
    }
    // 让a字体改变颜色
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].addEventListener("click", function () {
        for (var i = 0; i < Aa.length; i++) {
          Aa[i].classList.remove("blue");
        }
        this.classList.add("blue");
      });
    }
    // 显示与隐藏
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].onclick = function () {
        var uls = this.nextElementSibling;
        if (getComputedStyle(uls).height == "0px") {
          for (var j = 0; j < oUl.length; j++) {
            oUl[j].style.height = "0px";
          }
          uls.style.height =
            uls.children[0].offsetHeight * uls.children.length + "px";
        } else {
          uls.style.height = "0px";
        }
      };
    }
    // 创建数据
    var data = [
      {
        id: 1,
        title: "关于核酸检测规范",
        createUser: "张三",
        data: "2022-08-20",
        status: "待发布",
      },
      {
        id: 2,
        title: "关于核酸检测规范",
        createUser: "李四",
        data: "2022-08-20",
        status: "待发布",
      },
      {
        id: 3,
        title: "关于1核酸检测规范",
        createUser: "王五",
        data: "2022-08-21",
        status: "待发布",
      },
      {
        id: 4,
        title: "关于2核酸检测规范",
        createUser: "二麻子",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 5,
        title: "关于3核酸检测规范",
        createUser: "王大力",
        data: "2022-08-23",
        status: "待发布",
      },
      {
        id: 6,
        title: "关于核4酸检测规范",
        createUser: "张三1",
        data: "2022-08-24",
        status: "待发布",
      },
      {
        id: 7,
        title: "关于5核酸检测规范",
        createUser: "王明",
        data: "2022-08-24",
        status: "待发布",
      },
      {
        id: 8,
        title: "关于6核酸检测规范",
        createUser: "强子",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 9,
        title: "关于核酸检测规范",
        createUser: "萧红",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 10,
        title: "关于核酸检测规范",
        createUser: "晓珊",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 11,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 12,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 13,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 14,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 15,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 16,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 17,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 18,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 19,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 20,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
      {
        id: 21,
        title: "关于核酸检测规范",
        createUser: "张三1",
        data: "2022-08-22",
        status: "待发布",
      },
    ];
    // 获取元素
    var page = 1; //当前的页码
    var pageCount = 6; //每一页的数据量
    var oTbody = document.querySelector("tbody");
    var searchBtn = document.querySelector(".searchBtn"); //搜索按钮
    var searchInp = document.querySelector(".searchInp"); //输入框
    var pagination = document.querySelector(".pagination"); //页码容器
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var addBtn = document.querySelector(".addBtn"); //新增按钮
    var editChangeBtn = document.querySelector(".editChangeBtn"); //保存
    var forms = document.querySelector(".addFrom"); //新增表单
    var inp = document.querySelectorAll(".addFrom #addModal input"); //新增下面所有的input
  
    // 表单验证
    var rules = {
      // 账号
      id: {
        reg: /^\d{1,5}$/,
        info: "请输入正确的账号信息",
      },
      // 创建人
      createUser: {
        reg: /^([\u4e00-\u9fa5]{2,6})$/,
        info: "请输入2-6位中文",
      },
      // 标题
      title: {
        reg: /^([\u4e00-\u9fa5]{6,34})$/,
        info: "请输入标题",
      },
      // 日期
      data: {
        reg: /^(\d{4})([-])(\d{2})([-])(\d{2})$/,
        info: "格式有误：2022-08-21",
      },
      
      // 手机号
      // tel: {
      //     reg: /^(1[3-9]\d{9})$/,
      //     info: '请输入11位有效的电话号码'
      // },
    };
    // 封装函数(页面重新加载)
    function reload() {
      // 1、关于搜索
      var searchContent = searchInp.value; //获取搜索框的内容
      var newSearchContent = [];
      for (var i = 0; i < data.length; i++) {
        //循环遍历得到所有的数据
        if (searchContent.trim() == "") {
          //如果搜索的内容为空则展示出所有数据
          newSearchContent = data;
        } else {
          //模糊查找内容，只要满足一部分条件即可查找
          if (
            data[i].title.includes(searchContent) ||
            data[i].createUser.includes(searchContent) ||
            data[i].data.includes(searchContent) ||
            data[i].status.includes(searchContent)
          ) {
            newSearchContent.push(data[i]); //将查找的数据放入到新的数组中
          }
        }
      }
      // 2、关于数据的插入
      oTbody.innerHTML = ""; //刚开始页面为空
      // 第一页展示的数据：    1-6
      // 第二页展示的数据：    7-12
      // 第三页展示的数据：    13-18    ==>  (page - 1) *一页可展示的内容，page*一页可展示的内容
      var pageDataShow = newSearchContent.slice(
        (page - 1) * pageCount,
        page * pageCount
      );
      for (var i = 0; i < pageDataShow.length; i++) {
        var oTr = document.createElement("tr");
        oTr.innerHTML = `
        <td>${pageDataShow[i].id}</td>
        <td>${pageDataShow[i].title}</td>
        <td>${pageDataShow[i].createUser}</td>
        <td>${pageDataShow[i].data}</td>
        <td>${pageDataShow[i].status}</td>
        <td>
         <button type="button" class="btn btn-info edit" data-toggle="modal" data-target="#editModal">编辑</button>
         <button type="button" class="btn btn-success pass">发布</button>
         <button type="button" class="btn btn-danger delete">删除</button>
         </td>
        `;
        oTbody.appendChild(oTr);
      }
      // 关于页码的自动生成
      var pageBtn = document.querySelectorAll(".pageBtn"); //页码按钮
      // 删除所有的页码
      for (var i = 0; i < pageBtn.length; i++) {
        pagination.removeChild(pageBtn[i].parentNode);
      }
      // 根据数据的总量自动生成页码
      for (var i = 1; i <= Math.ceil(newSearchContent.length / pageCount); i++) {
        var oLi = document.createElement("li");
        oLi.innerHTML = `<a href="#" class = 'pageBtn'>${i}</a>`;
        // 如果当前的页码和i相同，那么就展示出默认样式
        if (page == i) {
          oLi.classList.add("active");
        }
        // 将li插入到ul的最后一个元素的前面  也就是插入到中间的位置（左右两边分别是左、右按钮）
        pagination.insertBefore(oLi, pagination.lastElementChild);
      }
    }
    // 当页面一加载的时候就展示出所有的数据
    reload();
    // 当点击搜索的时候
    searchBtn.addEventListener("click", function () {
      page = 1; //搜索出来的数据从第一页开始展示
      reload();
    });
     // 当按下回车键的时候
     searchInp.addEventListener('keyup',function () { 
      // console.log(keyCode)
      if(event.keyCode == 13){
        page = 1;
        reload();
      }
      event.preventDefault();
     })
    // 当点击分页按钮的时候，利用事件委托
    pagination.addEventListener("click", function () {
      if (event.target.className == "pageBtn") {
        page = event.target.innerText; //当前页码渲染的内容与点击的页码有关
        reload();
      }
    });
    // 当点击左右分页按钮的时候
    prev.addEventListener("click", function () {
      if (page > 1) {
        page--;
        reload();
      }
    });
    next.addEventListener("click", function () {
      if (page < Math.ceil(data.length / pageCount)) {
        page++;
        reload();
      }
    });
    // 当点击删除、审核通过、上门处理的时候,事件委托给tbody
    oTbody.addEventListener("click", function () {
      // 删除
      if (event.target.className.includes("delete")) {
        var id = event.target.parentNode.parentNode.children[0].innerText; //根据id删除相应的行
        // console.log(id);
        // 循环遍历拿到所有的数据
        for (var i = 0; i < data.length; i++) {
          // 如果点击的元素和该行的id相同，那么就删除这一行
          if (data[i].id == id) {
            var confirms = confirm('确认删除'+ data[i].title + '吗?');
            if(confirms){
              data.splice(i, 1); //data是数组对象
            }
          } 
        }
        reload();
      }
      // 审核通过
      if (event.target.className.includes("pass")) {
        var id = event.target.parentNode.parentNode.children[0].innerText;
        // console.log(id)
        for (var i = 0; i < data.length; i++) {
          if (data[i].id == id) {
            // event.target.parentNode.previousElementSibling.innerHTML = "审核通过";
            // event.target.parentNode.previousElementSibling.classList.add("passSuccess");
            // console.log(event.target.parentNode.previousElementSibling.innerHTML);
            // 上面的写法是错误的！！！
            data[i].status = "发布";
          }
        }
        reload();
      }
    });
    // 当表单里的input失去焦点的时候
    for (var i = 0; i < inp.length; i++) {
      inp[i].addEventListener("blur", function () {
        var str = this.value;
        if (str.trim() == "") {
          this.parentNode.nextElementSibling.innerHTML = "内容不能为空";
          this.parentNode.nextElementSibling.classList.add("red");
        } else if (rules[this.name].reg.test(str) == false) {
          this.parentNode.nextElementSibling.innerHTML = rules[this.name].info;
          this.parentNode.nextElementSibling.classList.add("red");
        } else {
          this.parentNode.nextElementSibling.innerHTML = "√";
          this.parentNode.nextElementSibling.classList.add("right");
        }
      });
    }
    // 当提交表单的时候
    forms.addEventListener("submit", function () {
      var temp = true;
      for (var j = 0; j < inp.length; j++) {
        var str = inp[j].value;
        if (str.trim() == "") {
          inp[j].parentNode.nextElementSibling.innerHTML = "内容不能为空";
          inp[j].nextElementSibling.classList.add("red");
          temp = false;
        } else if (rules[this.name].reg.test(str) == false) {
          inp[j].parentNode.nextElementSibling.innerHTML =
            rules[inp[j].name].info;
          inp[j].parentNode.nextElementSibling.classList.add("red");
          temp = false;
        } else {
          inp[j].parentNode.nextElementSibling.innerHTML = "√";
          inp[j].parentNode.nextElementSibling.classList.add("right");
        }
      }
      if (temp == false) {
        event.preventDefault();
        $("#addModal").modal("show"); // 隐藏模态框
      }
    });
     // 当点击新增的时候
     addBtn.addEventListener("click", function () {
      // 获取所有的value值
      var addId = document.querySelector(".addId").value;
      var addTitle = document.querySelector(".addTitle").value;
      var addCreatrUser = document.querySelector(".addCreatrUser").value;
      var addData = document.querySelector(".addData").value;
      // 将获取的值重新赋值给原来的data
      data.push({
        id: addId,
        title: addTitle,
        createUser: addCreatrUser,
        data: addData,
        status: "待发布",
      });
      reload();
      $("#addModal").modal("hide"); // 隐藏模态框
    });
  
    // 当点击编辑的时候
    oTbody.addEventListener("click", function () {
      if (event.target.className.includes("edit")) {
        // console.log(event.target.className)
        var id = event.target.parentNode.parentNode.children[0].innerText;
        for (var i = 0; i < data.length; i++) {
          // 将数据里面的内容渲染到弹出框中
          if (data[i].id == id) {
            document.querySelector(".editId").value = data[i].id;
            document.querySelector(".editName").value = data[i].name;
            document.querySelector(".editAge").value = data[i].age;
            document.querySelector(".editAddress").value = data[i].address;
            document.querySelector(".editData").value = data[i].data;
            document.querySelector(".editEvents").value = data[i].events;
          }
        }
      }
    });
    // 当点击保存的时候，也就是将上面获取的值重新再添加到数据中
    editChangeBtn.addEventListener("click", function () {
      // 获取当前编辑的id
      var id = document.querySelector(".editId").value;
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          data[i].id = document.querySelector(".editId").value;
          data[i].title = document.querySelector(".editTitle").value;
          data[i].createUser = document.querySelector(".editCreatrUser").value;
          data[i].data = document.querySelector(".editData").value;
        }
      }
      $("#editModal").modal("hide");
      reload();
    });
  };
  